<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
		<title>
			Fancytree - Example
		</title>
		<script src="../lib/jquery.js">
		</script>
		<script src="../src/jquery-ui-dependencies/jquery.fancytree.ui-deps.js">
		</script>
		<link href="../src/skin-xp/ui.fancytree.css" rel="stylesheet">
		<script src="../src/jquery.fancytree.js">
		</script>
		<script type="text/javascript">
			function ExpandAll3() {
				var start = Date.now();

				$("#tree").fancytree("getRootNode").visit(function(node) {
					node.setExpanded(true);
				});

				var end = Date.now();
				var time = end - start;
				console.log('expand time: ' + time);

				expanddone = Date.now();
			}
			$(function() {
				//no animations and no render/create node events
				console.time("initial_load");
				$("#tree").fancytree({
					source: {
						url: "ajax10k_nodes.json"
					},
					lazyLoad: function(event, data) {
						data.result = {url: "ajax10k_nodes.json"};
					},
					init: function(event, data) {
						console.timeEnd("initial_load");
						console.info("loaded " + data.tree.count() + " nodes");
					}
				});

				$("#btnExpandAll").click(function() {
					ExpandAll3();
				});
				$("#btnLoadCur").click(function() {
					console.time("load");
					$.ui.fancytree.getTree().getActiveNode().load(false).done(function(){
						console.timeEnd("load");
					});
				});
				$("#btnLoadCurForce").click(function() {
					console.time("load force");
					$.ui.fancytree.getTree().getActiveNode().load(true).done(function(){
						console.timeEnd("load force");
					});
				});
				$("#btnPageRender").click(function() {
					var end = Date.now();
					var holdingtime = end - expanddone;

					$("#pagerender").text(holdingtime);

				});
			});

			var expanddone;
		</script>
	</head>

	<body class="example">
		<button id="btnExpandAll"> Expand All Folders </button>
		<button id="btnPageRender">
			Click After the Page Stops Rendering (scrollbar appears/icons load)
		</button>
		<button id="btnLoadCur"> Load </button>
		<button id="btnLoadCurForce"> Load(force) </button>
		<br>Page render <span id="pagerender"> </span>
		<p>
			Tree with embedded JSON data
		</p>
		<div id="tree" class="sampletree">
		</div>
	</body>

</html>
